import { Component, Prop, Vue, Emit, Model } from 'vue-property-decorator'
import styles from './DetailItem.less'

@Component({})
export default class DetailItem extends Vue {
  @Prop({}) private data!: any[]
  @Prop({ default: '' }) private title!: string
  @Prop({ default: false }) private single!: string
  @Prop({ default: false }) private useSlot!: Boolean

  @Model('value', { type: Object }) private value!: any
  protected render(h: any) {
    return (
      <div>
        <p class={{ [styles.panel]: true, panel: true }}>{this.title}</p>
        <el-row class={{ [styles.row]: true, 'detail-row': true }}>
          {this.data &&
            this.data.map((item: any, index: number) => (
              <el-col span={item.colLength || 12} class={this.single && 'left'}>
                <el-form-item label={item.label || ''} prop={item.id}>
                  {item.type === 'input' ? (
                    <el-input
                      v-model={this.value[item.id]}
                      class={styles.itemInput}
                      onInput={(e: any) => {
                        this.$emit('input', { id: item.id, val: e })
                      }}
                    />
                  ) : (
                    <span class={styles.content}>
                      {item.content || ''}{' '}
                      {item.btnName && (
                        <el-button
                          class={styles.textBtn}
                          type="text"
                          onClick={() => item.onClick(item.content)}
                        >
                          {item.btnName}
                        </el-button>
                      )}
                    </span>
                  )}
                  {item.tips && (
                    <el-tooltip placement="bottom-start">
                      <p slot="content" class="w216">
                        {item.tips}
                      </p>
                      <i class="el-icon-question ml10" />
                    </el-tooltip>
                  )}
                </el-form-item>
                {item.reminder && (
                  <span class="updateReminder">
                    统一社会信用代码已更新，请仔细核对
                  </span>
                )}
              </el-col>
            ))}
          {this.useSlot && this.$slots.default}
        </el-row>
      </div>
    )
  }

  @Emit()
  private input(e: any) {
    return e
  }
}
